import React from 'react'
import { useFetcher, useRouteLoaderData } from 'react-router-dom'

function Component() {
  // 拿到根数据
  const { user } = useRouteLoaderData('root') as { user: string | null }
  const fetcher = useFetcher()

  if (!user) {
    return <p>You are not logged in.</p>
  }

  const isLoggingOut = fetcher.formData != null

  return (
    <div>
      <p>Welcome {user}!</p>
      <fetcher.Form method='post' action='/logout'>
        <button type='submit' disabled={isLoggingOut}>
          {isLoggingOut ? 'Signing out...' : 'Sign out'}
        </button>
      </fetcher.Form>
    </div>
  )
}

export default Component
